<template>
    <view>
        <view style="height: 20px"></view>
        <view style="margin: 20px;text-align: center;font-size: 26px;font-weight: bold;" class="main-color">
            <label>奇辰OPEN-API</label>
        </view>
        <view class="api-panel">
            <view class="title">CMS</view>
            <NoticeScroll :notice_list="notice_list" />
            <view class="api">
                <button class="main-bg-color" style="color: white" @click="form">表单</button>
            </view>
            <view class="api">
                <button class="main-bg-color" style="color: white" @click="article">文章</button>
            </view>
        </view>
        <view class="api-panel">
            <view class="title">支付</view>
            <view class="api">
                <button class="wx-bg-color" style="color: white" @click="pay">微信支付</button>
            </view>
        </view>
        <view class="api-panel">
            <view class="title">物联网</view>
            <view style="display: flex">
                <view style="width: 50%">
                    <view class="col-2-item main-bg-color" @click="navToIot">
                        <view style="padding: 10px 0px;height: 45px;line-height: 45px">
                            <i class="iconfont icon-wulianwang" style="font-size: 40px"></i>
                        </view>
                        <view class="name">IoT物联网</view>
                    </view>
                </view>
            </view>
        </view>
        <mymenu :activeMenu="'index'"></mymenu>
    </view>
</template>

<script>
import { pay as wxPay } from '@/pay/api/wx'
// 公告
import { queryOfProj as queryNoticeOfProj } from '@/cms/api/notice/notice'

import mymenu from '@/widget/components/Menu'
import NoticeScroll from '@/widget/components/notice/NoticeScroll'

export default {
    components: { mymenu, NoticeScroll },
    data() {
        return {
            // notice
            notice_list: []
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            queryNoticeOfProj().then(res => {
                this.notice_list = res.data.items
            })
        },
        pay() {
            let user_info = uni.getStorageSync('user_info')
            wxPay({
                openid: user_info.openid,
                money: 0.01,
                mode: '0',
                order_id: 0
            }).then(res => {
                if (res.errorCode == 200) {
                    let params = res.data
                    wx.requestPayment({
                        timeStamp: params.timeStamp,
                        nonceStr: params.nonceStr,
                        package: params.package,
                        signType: params.signType,
                        paySign: params.paySign,
                        success(res) {
                            console.log(res)
                        },
                        fail(res) {
                            console.log(res)
                        }
                    })
                }
            })
        },
        navToIot() {
            uni.navigateTo({
                url: '/iot/pages/device/list'
            })
        },
        form() {
            uni.navigateTo({
                url: '/cms/pages/form/index'
            })
        },
        article() {
            uni.navigateTo({
                url: '/cms/pages/article/index?id=8'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import url("~@/common/iconfont/iconfont.css");

.title {
    padding: 15rpx 15rpx 10rpx 15rpx;
    font-weight: bold;
}
.api {
    margin: 10px;
}

.col-2-item {
    margin: 15rpx;
    border-radius: 15rpx;
    text-align: center;
    color: white;

    .name {
        padding: 15rpx 0rpx;
    }
}
</style>